import { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { ImagePreview } from "@nutui/nutui-react-taro";

import "./index.less";

interface OrderDetail {
  plateNumber: string;
  brandModel: string;
  realName: string;
  identityFront: { url: string }; // 确保这里是 url
  identityBack?: { url: string } | null; // 确保这里是 url
  vehicleIdentificationNumber: string;
  vehicleType: string;
  publishedAt: string;
  status: string;
  vehicleRegistrationCertificateFront?: { url: string };
  vehicleRegistrationCertificateBack?: { url: string };
  businessLicenseImage?: { url: string };
  willingness?: { url: string };
  vehicleRegistration?: { url: string };
}

function DetailPage() {
  const instance = Taro.getCurrentInstance();
  const { value }: any = instance?.router?.params; // 获取传递的参数
  const [init, setInit] = useState(0);
  const [showPreview, setShowPreview] = useState(false);
  const [idImages, setIdImages] = useState<string[]>([]); // 这里指定了类型为字符串数组

  const params = JSON.parse(value as string);
  console.log(params, "params");

  const [orderDetail, setOrderDetail] = useState<OrderDetail | undefined>(
    params
  );
  const [error, setError] = useState(false);

  useEffect(() => {
    if (!orderDetail) {
      setError(true);
      Taro.showToast({
        title: "订单详情不存在",
        icon: "none",
      });
    }
  }, [orderDetail]);

  if (error) {
    return <View className="detail-page">订单详情不存在</View>;
  }

  if (!orderDetail) {
    return <View className="detail-page">加载中...</View>;
  }

  const previewImage = (url: string) => {
    if (url) {
      console.log(url, "url");
      setIdImages([url]); // 将新的 URL 作为单一元素数组
      setShowPreview(true); // 显示预览
    }
  };

  return (
    <View className="detail-page">
      <View className="detail-item detail-display">
        <View className="p_detail">
          <div className="detail">车牌号：</div> <div>{params.plateNumber}</div>
        </View>
        <View className="p_detail">
          <div className="detail">品牌型号：</div>{" "}
          <div>{params.brandModel}</div>
        </View>
        <View className="p_detail">
          <div className="detail">联系人：</div> <div>{params.realName}</div>
        </View>
        <View className="p_detail">
          <div className="detail">车辆识别号：</div>{" "}
          <div>{params.vehicleIdentificationNumber}</div>
        </View>
        <View className="p_detail">
          <div className="detail">车辆类型：</div>{" "}
          <div>{params.vehicleType}</div>
        </View>
        <View className="p_detail">
          <div className="detail">注册日期：</div>{" "}
          <div>{new Date(params.publishedAt).toLocaleString()}</div>
        </View>
        <View className="p_detail">
          <div className="detail">状态：</div> <div>{params.status}</div>
        </View>
      </View>

      <View className="phoneUser detail-item ">
        <div className="imgName">身份证正面/反面</div>
        <div className="image">
          <img
            onClick={() => previewImage(params.identityFront?.url)}
            src={params.identityFront?.url}
            alt="身份证正面"
          />
          {params.identityBack && (
            <img
              onClick={() => previewImage(params.identityBack?.url)}
              src={params.identityBack?.url}
              alt="身份证反面"
            />
          )}
        </div>
      </View>

      <View className="phoneUser detail-item">
        <div className="imgName">行驶证正面/反面</div>
        <div className="image">
          {params.vehicleRegistrationCertificateFront && (
            <img
              onClick={() =>
                previewImage(params.vehicleRegistrationCertificateFront?.url)
              }
              src={params.vehicleRegistrationCertificateFront?.url}
              alt="行驶证正面"
            />
          )}
          {params.vehicleRegistrationCertificateBack && (
            <img
              onClick={() =>
                previewImage(params.vehicleRegistrationCertificateBack?.url)
              }
              src={params.vehicleRegistrationCertificateBack?.url}
              alt="行驶证反面"
            />
          )}
        </div>
      </View>

      {params.businessLicenseImage && (
        <View
          className="phoneUser detail-item"
          onClick={() => previewImage(params.businessLicenseImage?.url)}
        >
          <div className="imgName">营业执照</div>
          <img src={params.businessLicenseImage?.url} alt="营业执照" />
        </View>
      )}

      {params.willingness && (
        <View
          className="phoneUser detail-item"
          onClick={() => previewImage(params.willingness?.url)}
        >
          <div className="imgName">授权委托书</div>
          <img src={params.willingness?.url} alt="授权委托书" />
        </View>
      )}

      {params.vehicleRegistration && (
        <View
          className="phoneUser detail-item"
          onClick={() => previewImage(params.vehicleRegistration?.url)}
        >
          <div className="imgName">机动车登记证</div>
          <img src={params.vehicleRegistration?.url} alt="机动车登记证" />
        </View>
      )}

      <ImagePreview
        autoPlay
        images={idImages}
        closeIcon
        visible={showPreview}
        defaultValue={init}
        onClose={() => setShowPreview(false)}
        indicator
      />
    </View>
  );
}

export default DetailPage;
